<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 顶部用户信息 -->
            <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-4 pt-8 pb-20 relative">
                <div class="flex justify-end">
                    <button class="text-white opacity-80"><i class="fas fa-cog"></i></button>
                </div>
                <div class="flex items-center mt-3">
                    <div class="w-20 h-20 rounded-full border-4 border-white overflow-hidden">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-4 text-white">
                        <h1 class="text-xl font-bold">李小明</h1>
                        <p class="text-sm opacity-90 mt-1">普通用户</p>
                        <div class="flex items-center mt-2">
                            <button class="bg-white bg-opacity-30 text-white text-xs px-3 py-1 rounded-full flex items-center">
                                <i class="fas fa-crown text-yellow-300 mr-1"></i>
                                开通会员
                            </button>
                            <div class="bg-white w-px h-3 mx-3 opacity-50"></div>
                            <p class="text-sm">ID: 2458963</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户数据统计 -->
            <div class="mx-4 bg-white rounded-xl shadow-md p-4 -mt-12 relative z-10 flex justify-around text-center">
                <div>
                    <p class="text-xl font-bold text-blue-500">2</p>
                    <p class="text-xs text-gray-500 mt-1">学习中</p>
                </div>
                <div class="border-l border-gray-100"></div>
                <div>
                    <p class="text-xl font-bold text-blue-500">5</p>
                    <p class="text-xs text-gray-500 mt-1">收藏</p>
                </div>
                <div class="border-l border-gray-100"></div>
                <div>
                    <p class="text-xl font-bold text-blue-500">3</p>
                    <p class="text-xs text-gray-500 mt-1">已完成</p>
                </div>
                <div class="border-l border-gray-100"></div>
                <div>
                    <p class="text-xl font-bold text-blue-500">8</p>
                    <p class="text-xs text-gray-500 mt-1">勋章</p>
                </div>
            </div>

            <!-- 学习进度 -->
            <div class="px-4 py-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-base font-semibold">学习进度</h2>
                    <a href="#" class="text-xs text-blue-500">查看全部</a>
                </div>
                <div class="bg-white rounded-xl p-4">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-semibold">本周学习情况</h3>
                        <div class="text-xs text-gray-500">35/40小时</div>
                    </div>
                    <div class="relative pt-1">
                        <div class="overflow-hidden h-2 mb-2 text-xs flex rounded bg-blue-100">
                            <div style="width:85%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
                        </div>
                        <div class="flex text-xs justify-between">
                            <span class="text-gray-500">周一</span>
                            <span class="text-gray-500">周二</span>
                            <span class="text-gray-500">周三</span>
                            <span class="text-gray-500">周四</span>
                            <span class="text-gray-500">周五</span>
                            <span class="text-gray-500">周六</span>
                            <span class="text-gray-500">周日</span>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between">
                        <div class="text-center">
                            <p class="text-lg font-bold text-blue-500">5</p>
                            <p class="text-xs text-gray-500">连续学习天数</p>
                        </div>
                        <div class="text-center">
                            <p class="text-lg font-bold text-blue-500">12</p>
                            <p class="text-xs text-gray-500">累计学习天数</p>
                        </div>
                        <div class="text-center">
                            <p class="text-lg font-bold text-blue-500">28</p>
                            <p class="text-xs text-gray-500">总学习时长(h)</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能列表 -->
            <div class="px-4 py-2">
                <h2 class="text-base font-semibold mb-3">功能与服务</h2>
                
                <div class="bg-white rounded-xl overflow-hidden">
                    <!-- 第一组功能 -->
                    <div class="grid grid-cols-4 py-4 border-b border-gray-100">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-1">
                                <i class="fas fa-download text-blue-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">下载管理</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mb-1">
                                <i class="fas fa-heart text-green-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">我的收藏</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-1">
                                <i class="fas fa-clipboard-list text-purple-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">学习记录</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-yellow-50 flex items-center justify-center mb-1">
                                <i class="fas fa-medal text-yellow-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">我的勋章</p>
                        </div>
                    </div>
                    
                    <!-- 第二组功能 -->
                    <div class="grid grid-cols-4 py-4">
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-1">
                                <i class="fas fa-credit-card text-red-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">订单记录</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center mb-1">
                                <i class="fas fa-comments text-indigo-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">我的问答</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-pink-50 flex items-center justify-center mb-1">
                                <i class="fas fa-envelope text-pink-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">我的消息</p>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center mb-1">
                                <i class="fas fa-headset text-gray-500"></i>
                            </div>
                            <p class="text-xs text-gray-600">客服中心</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设置列表 -->
            <div class="px-4 py-4">
                <h2 class="text-base font-semibold mb-3">设置</h2>
                <div class="bg-white rounded-xl overflow-hidden">
                    <div class="list-item">
                        <i class="fas fa-user-circle text-blue-500 mr-3"></i>
                        <span class="flex-1">个人资料</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                    <div class="list-item">
                        <i class="fas fa-bell text-yellow-500 mr-3"></i>
                        <span class="flex-1">通知设置</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                    <div class="list-item">
                        <i class="fas fa-shield-alt text-green-500 mr-3"></i>
                        <span class="flex-1">账号安全</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                    <div class="list-item">
                        <i class="fas fa-moon text-indigo-500 mr-3"></i>
                        <span class="flex-1">深色模式</span>
                        <div class="relative inline-block w-10 align-middle select-none">
                            <input type="checkbox" name="darkMode" id="darkMode" class="sr-only">
                            <div class="block bg-gray-300 w-10 h-6 rounded-full"></div>
                            <div class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div>
                        </div>
                    </div>
                    <div class="list-item">
                        <i class="fas fa-file-alt text-purple-500 mr-3"></i>
                        <span class="flex-1">关于我们</span>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>

                <button class="w-full bg-white text-red-500 font-semibold py-3 rounded-xl mt-4">
                    退出登录
                </button>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-graduation-cap"></i>
                <span>学习</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-crown"></i>
                <span>会员</span>
            </div>
            <div class="tab-bar-item active">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 